<template>
  <Drawer :visible="props.showDrawer" width="600px" @close="emits('update:showDrawer', false)" :destroyOnClose="true">
    <template #footer>
      <Space :size="90" style="display: flex; justify-content: center">
        <Button @click="emits('update:showDrawer', false)">取消</Button>
        <Button type="blue-white" @click="drawerOkFn" :disabled="doubleLockRef?.disbun">确认</Button>
      </Space>
    </template>

    <p class="title-sign">盘点样本确认</p>
    <div style="margin: 10px 21px">
      已选样本数量
      <span class="num">{{ props.size }}</span>
      支
    </div>
    <vxe-table :data="state.tableList" :expand-config="{ accordion: true }" size="mini">
      <vxe-column type="expand" width="180">
        <template #content="{ row }">
          <vxe-table :data="row.subSpecimens ?? []" ref="subTableRef" align="center">
            <vxe-column field="sortIndex" title="位置" :formatter="({ cellValue }) => {
              if (cellValue > row?.boxCols) {
                return `${Math.ceil(cellValue / row?.boxCols)}-${(cellValue % row?.boxCols) + 1}`;
              } else {
                return '1-' + (cellValue + 1);
              }
            }
              " />
            <vxe-column field="originalSerial" title="样本编号" />
            <vxe-column field="name" title="样本名称" />
            <vxe-column field="sampleTime" title="采样日期" />
            <vxe-column field="serial" title="数字编号" />
            <vxe-column title="容量" :formatter="({ row }) => `${unitCheck(row.capacity, row.countUnit)}`" />
          </vxe-table>
          <!--   【3】子表格-e   -->
        </template>
      </vxe-column>
      <vxe-column field="serial" title="冻存盒编号" />
      <vxe-column field="boxType" title="冻存盒类型" />
      <vxe-column field="projectName" title="课题组" />
    </vxe-table>

    <DoubleLock ref="doubleLockRef" :type="7" />
  </Drawer>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { Drawer, Space } from 'ant-design-vue';
import Button from '@/framework/components/basic/button/button.vue';
import DoubleLock from '@/components/doubleLock.vue';
import { padDataInventory, unitCheck } from '@/libs/utils';
const props = defineProps<{
  map;
  showDrawer;
  size;
  countData;
  inventoryType
}>();
const emits = defineEmits<{
  (e: 'update:showDrawer', state: boolean);
  (e: 'drawerOk', lockData?);
}>();
const state: {
  tableList: any[];
} = reactive({
  tableList: [],
});
const doubleLockRef = ref();
watch(
  () => props.showDrawer,
  (newValue) => {
    if (newValue) {
      state.tableList = [...props.map].map((item) => {
        item[0].subSpecimens = item[1];
        return item[0];
      });
    }
  },
);
const drawerOkFn = () => {
  if (props.inventoryType == 1) {
    console.log('平板移库');
    padDataInventory(state.tableList, props.countData, 'INVENTORY');
  }
  emits('drawerOk');
};
</script>

<style scoped lang="less">
.num {
  width: 18px;
  color: rgba(50, 145, 248, 100);
  font-size: 28px;
  line-height: 0;
}

:deep(.vxe-icon--arrow-right:before) {
  border-top-color: #606266;
  border-right-color: #606266;
}
</style>
